<template>
  <div id="search-bar" @click="toSearch">
    <van-search 
      v-model="searchValue" 
      placeholder="搜索" 
      input-align='left'
      background="#eb4450"
      disabled />
  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import "vant/lib/search/style";
Vue.use(Search);

export default {
  name:"SearchBar",
  data(){
    return {
      searchValue:""
    }
  },
  methods:{
    toSearch(){
      this.$emit("searchClick",true)
    }
  }
}
</script>

<style scoped>
  #search-bar /deep/ .van-icon-search:before {
    color: #bbb;
    margin-left: 105px;
  }
</style>